<template>
  <div>
    <p id="app1">{{ friend.name }}</p>
    <div class="chat" ref="chat">
      <div class="chat-item" v-for="(msg,index) in info.message" :key=index>
        <!-- 聊天记录头像 -->
        <el-avatar
          :class="msg.id == id ? 'el-avatar-right' : 'el-avatar-left'"
          :size="45"
          :src="msg.id == id ? avatar : friend.url"/>
        <!-- 聊天记录时间 -->
        <cite :class="msg.id == id ? 'chat-time-right' : 'chat-time-left'">{{
            (msg.id == id ? name : friend.name) + '  ' + formatTime(msg.date)
          }}</cite>
        <!-- 聊天记录汽包的箭头 -->
        <div :class="msg.id == id ? 'chat-arrow-right' : 'chat-arrow-left'"></div>
        <!-- 聊天记录内容 -->
        <!--       判断 ,是什么类型的消息 , 通过什么样的组件 , 进行展示-->
        <!--        文本消息-->
        <div v-if="msg.type == '0'">
          <span :class="msg.id == id ? 'chat-text-right' : 'chat-text-left'">{{ msg.mes }}</span>
        </div>
        <!--        图片消息-->
        <div v-else-if="msg.type == '1'">
          <span :class="msg.id == id ? 'chat-text-right' : 'chat-text-left'">
            <img style="height: 100px;height: 100px" :src="msg.mes">
          </span>
        </div>
        <!--        表情消息-->
        <div v-else-if="msg.type == '3'">
          <span :class="msg.id == id ? 'chat-text-right' : 'chat-text-left'">
            <img style="height: 30px;height: 30px" :src="msg.mes">
          </span>
        </div>
        <!--        视频消息组件-->
        <div v-else-if="msg.type == '2'">
          <span :class="msg.id == id ? 'chat-text-right' : 'chat-text-left'">
            <video width="300px" height="200px" controls>
              <source :src="msg.mes">
            </video>
          </span>
        </div>
      </div>
    </div>
    <!--    发送消息的输入框-->
    <div id="app2">
      <!--      发送表情消息的输入框-->
      <!--      定义一个div , 来存放 发送图片 , 表情的按钮-->
      <!--      <ul class="u1"></ul>-->

      <!-- 弹出框，展示emoji表情，供你选择 -->
      <el-popover placement="top" width="400" trigger="click">
        <div class="emojis">
          <!-- 选择的是表情的名字 -->
          <div
            v-for="item in expression"
            :key="item"
            class="emoji"
            @click="chooseEmoji(item)"
          >
            <img
              :src="ServerUrl +item"
              style="width: 30px; height: 30px"
            >
          </div>
        </div>
        <div slot="reference">
          <ul class="u1"></ul>
        </div>
      </el-popover>
      <!-- 点击发表情按钮，弹出emoji表情列表 -->
      <!--      <ul class="u1" @click="visible = !visible"></ul>-->

      <!--      ======================================================================================= -->
      <div style="float: left">
        <el-upload
          class="upload-demo"
          name="alterimage"
          action="http://192.168.2.122:8080/conversation/uploadimage"
          :on-success="handleChange"
        >
          <!--      指定点击事件 , 发送图片-->
          <ul class="u2"></ul>
        </el-upload>
      </div>
      <!--      指定点击事件 , 发送视频-->
      <div style="float: left">
        <el-upload
          class="upload-demo"
          name="altervideo"
          action="http://192.168.2.122:8080/conversation/videoMessage"
          :on-success="handleMessage"
        >
          <ul class="u3"></ul>
        </el-upload>
      </div>
      <!--      ====================================================== -->

      <ul class="u4"></ul>
      <ul class="u5"></ul>

      <div class="app5">
        <textarea id="inp3"
                  v-model="textarea"
                  @keydown.enter="keyDown"
                  placeholder="请输入内容"/>
      </div>
      <!--      定义一个发送消息的按钮-->
      <el-button id="but1" type="primary" @click="send()" plain>发送(S)</el-button>
    </div>
  </div>

</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "coze",
  props: {
    //父组件 , 传递子组件的信息 , 会话列表指定索引位置的元素
    info: {}
  },
  data() {
    return {
      textarea: null,
      visible: false
    }
  },
  methods: {
    //发送表情消息
    chooseEmoji(item) {
      const messge = this.ServerUrl + item;
      this.sendMessage(messge, "3")
    },

    //  上传视频
    handleMessage(response) {
      // 获取返回的文件的地址 ;
      const image = response

      this.sendMessage(image, "2")
    },
    // 上传,  ,图片 , 发送图片
    handleChange(response) {
      // 获取返回的文件的地址 ;
      const image = response
      this.sendMessage(image, '1')
    },


    keyDown(e) {
      if (e.ctrlKey && e.keyCode == 13) {   //用户点击了ctrl+enter触发
        this.textarea += '\n';
      } else {          //用户点击了enter触发
        this.send();
      }
    },
    // 发送消息
    send() {
      if (this.textarea != null && this.textarea != "") {
        //发送消息
        this.sendMessage(this.textarea, "0")
        //清空输入框
        this.textarea = ' ';
        var div = this.$refs["chat"]
        div.scrollTop = (div.scrollHeight);
      }
    },

    // 向服务端 , 发送一条消息 , 第一个参数是消息的内容, 第二个参数是消息的内容
    sendMessage(messagetext, messagetype) {
      var times = new Date().getTime();
      // 包装成一个json消息
      let msgs = {
        category: "message",         //消息类别 , 如果是私聊消息 , 则是message , 如果是请求消息 , 则是request
        converid: this.info.id,      //消息的所属的会话
        fromId: this.id,             //消息的发送者
        fromName: this.name,         //消息的发送者的名字
        toId: this.friend.id,        //消息的接收者
        time: times,                 //消息的时间
        type: messagetype,           //消息类型
        content: messagetext,        //消息的内容
      };
      //创建一个消息对象
      let message = {
        id: this.id,           //消息发送者
        acc: this.friend.id,   //消息接收者
        mes: messagetext,      //消息内容
        type: messagetype,     //消息类型
        date: times            //消息时间
      };
      //把消息 , 使用WebSocket发送到服务端 , 进行保存 , 转发
      this.webSocket.send(JSON.stringify(msgs));
      // 向朋友列表的数组里面 , 添加一条消息内容 addFriendsMessage
      var m = {"id": this.info.id, "me": message};
      this.$store.dispatch("message/addMessage", m) //// 向消息的Vuex里面 , 保存数据, 保存一条消息数据
    },
    // 格式化时间 , 日期
    formatTime(time) {
      var date = new Date(parseInt(time));
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var hours = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      //月
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      //日
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      //时
      if (hours >= 0 && hours <= 9) {
        hours = "0" + hours;
      }
      //分
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      }
      //秒
      if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      //格式化后日期为：yyyy-MM-dd HH:mm:ss
      var currentdate =
        date.getFullYear() +
        seperator1 +
        month +
        seperator1 +
        strDate +
        " " +
        hours +
        seperator2 +
        minutes +
        seperator2 +
        seconds;
      return currentdate;
    }
  },
//  计算属性
  computed: {
    //引入当前用户的个人信息
    ...mapGetters(['id', 'name', 'friends', 'avatar', 'webSocket', 'ServerUrl', 'expression']),
    //获取当前操作的用户朋友的信息
    friend() {
      var fri;
      //  判断 , 会话的发起者 , 是否是当前用户 , 如果是当前用户 , 则展示 to , 如果是to , 则展示当前用户
      if (this.info.fromid == this.id) {   //是当前用户
        fri = this.info.toid;
      } else {
        fri = this.info.fromid;            //不是当前用户 , 则展示fromid;
      }
      //  通过id , 到朋友列表中 , 查询到用户的信息 , 进行展示
      for (let i = 0; i < this.friends.length; i++) {
        //  判断 , 用户 , 是否相同 , 如果相同 , 则把用户的信息 , 返回出去
        if (this.friends[i].id == fri) {
          return this.friends[i];
        }
      }
    }

  },
}
</script>

<style scoped>

#inp3 {
  width: 100%;
  height: 100px;
  font-size: 15px;
  color: #000000;
  border: none;
  resize: none;
  outline: none;
}

#app1 {
  font-size: 14px;
  font-weight: 400;
  height: 10px;
  text-align: left;
  padding-left: 10px;
}

.app5 {
  width: 95%;
  height: 67px;
  margin: 0 auto;
}

ul {
  float: left;
  padding-left: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  width: 15px;
  height: 20px;
}

.u1 {
  background-image: url("./01.png");
  padding-left: 40px;
}

.u2 {
  background-image: url("./02.png");
  padding-left: 30px;
}

.u3 {
  background-image: url("./03.png");
  padding-left: 30px;
}

.u4 {
  background-image: url("./04.png");
  padding-left: 30px;
}

.u5 {
  background-image: url("./05.png");
  padding-left: 30px;
}

/*.app3 {*/
/*  height: 100%;*/
/*  border: 0px;*/
/*  outline: none;*/
/*  cursor: pointer*/
/*}*/

#app2 {
  border-top: 1px solid #b0b0b0;
  width: 100%;
}

#but1 {
  position: relative;
  left: calc(100% - 100px);

}

.send {
  width: 50%;
  margin: 20px auto;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

.receiver-class {
  width: 20%;
  margin-bottom: 20px;
}

.send-content-class {
  width: 100%;
  margin-bottom: 20px;
}

.send-btn-class {
  margin: 0% auto;
  width: 40px;
  height: 40px;
}

.chat {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0%;
  padding: 0%;
  background-color: white;
  border-top: 1px solid #b0b0b0;
  width: 100%;
  height: 500px;
  min-height: calc(100vh - 260px);
  max-height: 800px;
  /* 超出高度显示滚动条 */
  overflow: auto;
  /*overflow-x: auto;*/
}

.chat-item {
  /* 父容器的高度由relative类型的子元素的高度决定 */
  position: relative;
  width: 100%;
  height: 100%;
}

.el-avatar-left {
  position: absolute;
  left: 15px;
  top: 15px;
}

.el-avatar-right {
  position: absolute;
  right: 15px;
  top: 15px;
  left: auto;
}

.chat-time-left {
  position: absolute;
  left: 70px;
  top: 15px;
  color: #999;
  font-size: 12px;
  font-style: normal;
  line-height: 24px;
  text-align: left;
}

.chat-time-right {
  position: absolute;
  right: 70px;
  top: 15px;
  color: #999;
  font-size: 12px;
  font-style: normal;
  line-height: 24px;
  text-align: left;
}

/* 汽包的箭头 */
.chat-arrow-left {
  position: absolute;
  top: 45px;
  left: 65px;
  /* 宽高为0时，这个这个容器就剩下了边框，由边框组成，
  4个边框为4个三角形，组合成一个矩形，
  把另外3个边框设置成透明，把剩下的边框设置成想要的颜色即可 */
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 12px;
  border-left-width: 0;
  border-right-color: #ebeef5;
}

/* 气泡的箭头 */
.chat-arrow-right {
  position: absolute;
  top: 45px;
  right: 60px;
  left: auto;
  /* 宽高为0时，这个这个容器就剩下了边框，由边框组成，
  4个边框为4个三角形，组合成一个矩形，
  把另外3个边框设置成透明，把剩下的边框设置成想要的颜色即可 */
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 8px 16px;
  border-right-width: 0;
  border-left-color: #cce4fc;
}

.chat-text-left {
  /* 父容器的高度由relative类型的子元素的高度决定 */
  position: relative;
  height: auto;
  text-align: left;
  margin-top: 40px;
  margin-left: 70px;
  max-width: 80%;
  width: fit-content;
  background-color: #dee0e3;
  padding: 10px;
  font-size: 13px;
  color: #111;
  display: block;
  font-family: 微软雅黑;
  letter-spacing: 1px;
}

.chat-text-right {
  /* 父容器的高度由relative类型的子元素的高度决定 */
  position: relative;
  height: auto;
  text-align: left;
  margin-top: 40px;
  margin-right: 70px;
  margin-left: auto;
  max-width: 80%;
  width: fit-content;
  background-color: #cce4fc;
  padding: 10px;
  font-size: 13px;
  color: #111;
  display: block;
  font-family: 微软雅黑;
  letter-spacing: 1px;
}

.emoji {
  height: 40px;
  width: 40px;
  box-sizing: border-box;
}

.emojis {
  height: 160px;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: scroll;
}
</style>
